<template>
  <div id="box">
    <div id="header">
      <i class="el-icon-menu"></i>
      <span>促销活动</span>
    </div>
    <div id="buttons">
      <el-button
        id="button1"
        type="primary"
        :class="[sel == 0 ? 'active' : '']"
        @click="tab(0)"
        >活动类型管理</el-button
      >
      <el-button
        id="button2"
        type="primary"
        :class="[sel == 1 ? 'active' : '']"
        @click="tab(1)"
        >活动管理</el-button
      >
    </div>
    <div id="content">
      <!-- <transition-group
        enter-active-class="backInRight"
        leave-active-class="backOutLeft"
      > -->
      <div class="content1" v-show="sel == 0">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="新增活动类型" name="first">
            <el-form :model="addType" label-width="80px">
              <el-form-item label="名称">
                <el-input
                  v-model="addType.name"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input
                  type="textarea"
                  :rows="5"
                  style="width: 300px"
                  v-model="addType.description"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-radio-group v-model="addType.status">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="addEventCategory"
                  style="width: 250px"
                  >添加</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="查看活动类型" name="second">
            <el-table :data="showType" style="width: 100%">
              <el-table-column prop="id" label="ID" width="180">
              </el-table-column>
              <el-table-column prop="name" label="活动类型名称" width="180">
              </el-table-column>
              <el-table-column prop="description" label="描述" width="500">
              </el-table-column>
              <el-table-column prop="status" label="活动状态">
                <template slot-scope="scope">
                  <el-button
                    @click="modify(scope.$index, scope.row)"
                    type="success"
                    plain
                    v-if="scope.row.status == 0"
                    size="mini"
                    >开启</el-button
                  >
                  <el-button
                    type="warning"
                    plain
                    v-else
                    size="mini"
                    @click="modify(scope.$index, scope.row)"
                    >锁定</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="typeData.length"
              :page-size="pageSize"
              :current-page="currentpage"
              @prev-click="pre"
              @next-click="next"
              @current-change="pageChange"
              align="right"
              v-if="typeData.length > pageSize"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="content2" v-show="sel == 1">
        <el-tabs v-model="activeName" @tab-click="show">
          <el-tab-pane label="新增活动" name="first">
            <el-form
              :model="addEvent"
              label-width="80px"
              :inline="true"
              style="width: 800px"
            >
              <el-form-item label="活动名称">
                <el-input
                  v-model="addEvent.name"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="类别">
                <el-select v-model="addEvent.type" placeholder="请选择类别">
                  <el-option
                    v-for="(item, index) in typeOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <br />
              <el-form-item label="开启时间" style="margin-right: 80px">
                <el-col :span="30">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="addEvent.start"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-col :span="30">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="addEvent.end"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="5"
                  style="width: 300px"
                  v-model="addEvent.remarks"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-radio-group v-model="addEvent.status" style="width: 100px">
                  <el-radio label="1" style="margin: 10px 0">开启</el-radio>
                  <el-radio label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <br />
              <el-form-item>
                <el-button
                  type="primary"
                  @click="add"
                  style="width: 250px; margin-left: 100px"
                  >添加</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="查看活动列表" name="second">
            <el-table :data="showEvent" style="width: 100%" v-show="isShow">
              <el-table-column prop="id" label="活动编号"> </el-table-column>
              <el-table-column prop="name" label="活动名称"> </el-table-column>
              <el-table-column prop="type" label="类别"> </el-table-column>
              <el-table-column prop="start" label="开启时间"> </el-table-column>
              <el-table-column prop="end" label="结束时间"> </el-table-column>
              <el-table-column prop="remarks" label="备注"> </el-table-column>
              <el-table-column prop="status" label="状态" width="200px">
                <template slot-scope="scope">
                  <el-button
                    @click="modifyEvent(scope.$index, scope.row)"
                    type="success"
                    plain
                    v-if="scope.row.status == 0"
                    size="mini"
                    >开启</el-button
                  >
                  <el-button
                    type="warning"
                    plain
                    v-else
                    size="mini"
                    @click="modifyEvent(scope.$index, scope.row)"
                    >锁定</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="showData(scope.$index, scope.row)"
                    >管理</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              v-show="isShow"
              layout="prev, pager, next"
              :total="eventData.length"
              :page-size="pageSize"
              :current-page="currentpage"
              @prev-click="pre"
              @next-click="next"
              @current-change="pageChange"
              align="right"
              v-if="eventData.length > pageSize"
            >
            </el-pagination>
            <div id="content3" v-show="isShow1">
              <div id="header1">
                <el-form
                  :model="searchParams"
                  label-width="100px"
                  :inline="true"
                >
                  <el-form-item label="一级商品类别" style="magin-top: 10px">
                    <el-select
                      v-model="searchParams.classA"
                      placeholder="请选择"
                      @change="changeSelect"
                    >
                      <el-option value=""></el-option>
                      <el-option
                        v-for="(item, index) in classAs"
                        :key="index"
                        :label="item.classname"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="二级商品类别">
                    <el-select
                      v-model="searchParams.classB"
                      placeholder="请选择"
                    >
                      <el-option value=""></el-option>
                      <el-option
                        v-for="(item, index) in classBs"
                        :key="index"
                        :label="item.classname"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="success"
                      @click="query"
                      style="width: 100px"
                      >查询商品</el-button
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      @click="dialogFormVisible = true"
                      style="width: 100px"
                      >添加商品</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
              <div id="content4">
                <el-table
                  :data="showTbody"
                  style="width: 100%"
                  max-height="320px"
                  size="small"
                >
                  <el-table-column prop="id" label="商品ID"> </el-table-column>
                  <el-table-column prop="barcode" label="条形码">
                  </el-table-column>
                  <el-table-column prop="name" label="商品名称">
                  </el-table-column>
                  <el-table-column prop="quantity" label="数量">
                  </el-table-column>
                  <el-table-column label="选择" width="200px">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="tableData.length"
                  :page-size="pageSize"
                  :current-page="currentpage"
                  @prev-click="pre"
                  @next-click="next"
                  @current-change="pageChange"
                  align="right"
                  v-if="tableData.length > pageSize"
                >
                </el-pagination>
                <el-button
                  type="danger"
                  @click="show"
                  style="float: right; margin: 10px"
                  >确 定</el-button
                >
              </div>
              <el-dialog
                title="设置活动商品"
                :visible.sync="dialogFormVisible"
                width="40%"
                center
              >
                <el-form center label-width="100px">
                  <el-form-item label="活动名称">
                    <el-input
                      v-model="activityName"
                      :disabled="true"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品ID">
                    <el-input
                      v-model.number="addGood.id"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品条形码">
                    <el-input
                      v-model.number="addGood.reach_id"
                      placeholder="请输入13位条形码"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="商品名称">
                    <el-input
                      v-model="addGood.name"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="折扣力度" v-if="formShow == 1">
                    <el-input
                      v-model.number="addGood.discount"
                      placeholder="与名称一致并且转为小数(如8折写作0.8)"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="买" v-if="formShow == 2">
                    <el-input
                      v-model.number="addGood.reach"
                      placeholder="几(与名称里的一致)"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="送" v-if="formShow == 2">
                    <el-input
                      v-model.number="addGood.give"
                      placeholder="几(与名称里的一致)"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="赠品条码" v-if="formShow == 2">
                    <el-input
                      v-model.number="addGood.give_id"
                      placeholder="请输入赠品的13位条形码"
                      autocomplete="off"
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="addGoods">确 定</el-button>
                </div>
              </el-dialog>
            </div>
          </el-tab-pane>
          <el-tab-pane label="生成活动条形码" name="third">
            <el-form
              :model="form"
              label-width="100px"
              :inline="true"
              style="width: 800px"
            >
              <el-form-item label="选择活动名称">
                <el-select
                  v-model="form.region"
                  placeholder="请选择活动名称"
                  @change="changeSelectName"
                >
                  <el-option
                    v-for="(item, index) in eventOptions"
                    :key="index"
                    :label="item.name"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  style="width: 200px"
                  size="small"
                  @click="creatbarcode"
                  >生成条形码</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 200px"
                  size="small"
                  v-print="'#printTable'"
                  >打印条形码</el-button
                >
              </el-form-item>
            </el-form>
            <el-table
              id="printTable"
              :data="tableData"
              height="350"
              border
              style="width: 100%; overflow: auto"
            >
              <el-table-column label="条形码" width="500px">
                <template slot-scope="scope">
                  <svg :id="gernerateId(scope.$index, scope.row)">
                    条形码不能显示
                  </svg>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称" width="180px">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- </transition-group> -->
    </div>
  </div>
</template>

<script>
import JsBarcode from "jsbarcode";
export default {
  data() {
    return {
      sel: 1,
      isShow: true,
      isShow1: false,
      activeName: "first",
      pageSize: 5,
      currentpage: 1,
      eventData: [],
      typeData: [],
      addType: {
        name: "",
        description: "",
        status: "1",
      },
      addEvent: {
        name: "",
        type: "",
        start: "",
        end: "",
        remarks: "",
        status: "1",
      },
      typeOptions: [],
      reachId: [],
      tableData: [],
      searchParams: {
        classA: "",
        classB: "",
        name: "",
        quantity: "",
      },
      classAs: [],
      classBs: [],
      dialogFormVisible: false,
      activityName: "",
      activityId: "",
      //formshow:this.activityName.indexOf("折") != -1,
      barcodes: [],
      addGood: {
        id: "",
        name: "",
        discount: "",
        reach: "",
        reach_id: "",
        give: "",
        give_id: "",
      },
      eventOptions: [],
      form: {
        region: "",
      },
    };
  },
  //页面加载时渲染数据
  created() {
    this.getClassA();
    this.$axios({
      method: "post",
      url: "http://server.hloli.cn:23300/api/selEvent",
      params: {
        limit: 10,
        page: 1,
      },
    })
      .then((res) => {
        // handle success
        console.log(res);
        this.eventData = res.data.data;
        this.eventOptions = res.data.data;
        //console.log(this.eventData)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      });
    this.handleClick();
  },
  methods: {
    tab(index) {
      this.sel = index;
    },
    pre: function () {
      this.currentpage--;
    },
    pageChange: function (currentpage) {
      this.currentpage = currentpage;
    },
    next: function () {
      this.currentpage++;
    },
    //渲染活动类型表格
    handleClick() {
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selEventCategory",
        params: {
          limit: 8,
          page: 1,
        },
      })
        .then((res) => {
          // handle success
          console.log(res);
          this.typeData = res.data.data;
          this.typeOptions = res.data.data;
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    onSubmit() {
      console.log("submit!");
    },
    //时间戳转为时间
    shijianchuo(value) {
      var date = new Date(value);
      // console.log(date)
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D;
    },

    //查看活动列表
    show() {
      this.isShow = true;
      this.isShow1 = false;
      this.tableData = [];
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selEvent",
        params: {
          limit: 10,
          page: 1,
        },
      })
        .then((res) => {
          // handle success
          console.log(res);
          this.eventData = res.data.data;
          this.eventOptions = res.data.data;
          //console.log(this.eventData)
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
      for (var i = 0; i < this.eventData.length; i++) {
        //console.log(this.eventData[i])
        this.eventData[i].start = this.shijianchuo(this.eventData[i].start);
        this.eventData[i].end = this.shijianchuo(this.eventData[i].end);
        for (var j = 0; j < this.typeData.length; j++) {
          if (this.eventData[i].type == this.typeData[j].id) {
            this.eventData[i].type = this.typeData[j].name;
          }
        }
      }
    },
    //添加活动类型
    addEventCategory() {
      //console.log("addtype!");
      this.$axios({
        url: "http://server.hloli.cn:23300/api/addEventCategory",
        method: "post",
        params: this.addType,
      })
        .then((res) => {
          console.log(res);
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch(function (error) {
          console.log(error);
          this.$message({
            type: "info",
            message: "添加失败",
          });
        });
      this.addType = { brand_right: 0 };
    },
    //修改活动类型状态
    modify: function (index, row) {
      this.$confirm("确认修改该活动状态吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.status == 1) {
            row.status = 0;
          } else {
            row.status = 1;
          }
          this.$axios({
            url: "http://server.hloli.cn:23300/api/editEventCategory",
            method: "post",
            params: {
              id: row.id,
              name: row.name,
              description: row.description,
              status: row.status,
            },
          }).then((res) => {
            console.log(res);
          });
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    //添加活动
    add() {
      var date1 = new Date(this.addEvent.start);
      var date2 = new Date(this.addEvent.end);
      this.addEvent.start = date1.getTime();
      this.addEvent.end = date2.getTime();
      console.log(this.addEvent);
      this.$axios({
        url: "http://server.hloli.cn:23300/api/addEvent",
        method: "post",
        params: this.addEvent,
      })
        .then((res) => {
          console.log(res);
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: "info",
            message: "添加失败",
          });
        });
      this.addEvent = { brand_right: 0 };
    },
    //修改活动状态
    modifyEvent: function (index, row) {
      this.$confirm("确认修改该活动状态吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.status == 1) {
            row.status = 0;
          } else {
            row.status = 1;
          }
          //console.log(row.status)
          this.$axios({
            url: "http://server.hloli.cn:23300/api/setEventStatus",
            method: "post",
            params: {
              status: row.status,
              id: row.id,
            },
          }).then((res) => {
            console.log(res);
          });
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    //点击管理渲染数据
    showData(index, row) {
      this.isShow = false;
      this.isShow1 = true;
      this.activityName = row.name;
      this.activityId = row.id;
      this.readerData(row.id);
    },
    readerData(id) {
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selProductEvent",
        params: {
          id: id,
        },
      })
        .then((res) => {
          console.log(id);
          var reachID = res.data.data[0].reach_id;
          this.$axios({
            method: "post",
            url: "http://server.hloli.cn:23300/api/selProduct",
            params: {
              mode: 0, //0 所有商品, 1 模糊查询-肉-所有名称包含"肉"的商品, 2 条码为content的商品, 3 查询一类 4查询二类
              limit: 100, //每页返回多少条 最小值为0
              page: 1, //第几页
            },
          })
            .then((res) => {
              console.log(res);
              if (reachID == -1) {
                this.tableData = res.data.data;
              } else {
                for (var i = 0; i < res.data.data.length; i++) {
                  if (id == res.data.data[i].event_id) {
                    this.tableData.push(res.data.data[i]);
                  }
                }
              }
              //this.tableData = res.data.data;
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    //将商品从某活动中移出(接口)
    handleDelete(index, row) {
      this.$confirm("您确定要删除该商品吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //console.log(index)
          //console.log(this.tableData[index].barcode)
          this.$axios({
            url: "http://server.hloli.cn:23300/api/delEventProduct",
            params: {
              id: this.activityId,
              barcode: this.tableData[index].barcode,
            },
            method: "post",
          }).then((res) => {
            console.log(res);
            if (res.data.code == 409) {
              this.tableData = this.tableData.filter((v, i) => {
                return v.id != row.id;
              });
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "info",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //select二级联动
    changeSelect() {
      //console.log(this.searchParams.classA)
      this.searchParams.classB = "";
      this.classBs = [];
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        params: {
          mode: 0,
          limit: 8,
          page: 1,
        },
      })
        .then((res) => {
          //console.log(res);
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].superclass == this.searchParams.classA) {
              this.classBs.push(res.data.data[i]);
              //   console.log(this.classBs);
            }
          }
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    //获取一级类别
    getClassA() {
      this.$axios({
        method: "post",
        url: "http://server.hloli.cn:23300/api/selProductCategory",
        params: {
          mode: 0,
          limit: 8,
          page: 1,
        },
      })
        .then((res) => {
          //console.log(res);
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].superclass == 0) {
              this.classAs.push(res.data.data[i]);
              //console.log(this.classAs);
            }
          }
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        });
    },
    //搜索商品
    query() {
      var select1 = this.searchParams.classA;
      var select2 = this.searchParams.classB;
      //console.log(select1);
      //console.log(select2);
      if (select2 != "") {
        this.$axios({
          method: "post",
          url: "http://server.hloli.cn:23300/api/selProduct",
          params: {
            mode: 4,
            content: select2, //二类的id
            limit: 100,
            page: 1,
          },
        })
          .then((res) => {
            // handle success
            console.log(res);
            this.tableData = res.data.data;
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          });
      } else {
        this.$axios({
          method: "post",
          url: "http://server.hloli.cn:23300/api/selProduct",
          params: {
            mode: 3,
            content: select1, //一类的id
            limit: 100,
            page: 1,
          },
        })
          .then((res) => {
            // handle success
            console.log(res);
            this.tableData = res.data.data;
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          });
      }
    },
    //设置活动商品
    addGoods() {
      this.dialogFormVisible = false;
      if (this.addGood.discount == "") {
        this.addGood.discount = 1;
      }
      this.$axios({
        url: "http://server.hloli.cn:23300/api/setEvent",
        method: "post",
        params: {
          id: this.activityId,
          discount: this.addGood.discount,
          reach: this.addGood.reach,
          reach_id: this.addGood.reach_id,
          give: this.addGood.give,
          give_id: this.addGood.give_id,
        },
      })
        .then((res) => {
          console.log(res);
          this.$message({
            type: "success",
            message: "添加成功!",
          });
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: "info",
            message: "添加失败",
          });
        });
      // window.location.reload();
    },
    //条形码部分
    changeSelectName() {
      this.tableData = [];
      this.readerData(this.eventOptions[this.form.region].id);
    },
    gernerateId(index, row) {
      return "barcode" + index;
    },

    creatbarcode() {
      if (this.eventOptions[this.form.region].status == 0) {
        alert("该活动已结束，请重新选择活动！");
      } else {
        for (var i = 0; i < this.tableData.length; i++) {
          var value = this.tableData[i].barcode;
          this.barcode(i, value);
        }
      }
    },
    barcode(i, value) {
      //console.log(i)
      JsBarcode("#barcode" + i, value, {
        format: "EAN13", //条形码的格式
        displayValue: true, //是否显示文字信息
      });
    },
  },
  computed: {
    showType: function () {
      let start = (this.currentpage - 1) * this.pageSize;
      let end = Math.min(
        this.currentpage * this.pageSize,
        this.typeData.length
      );
      return this.typeData.slice(start, end);
    },
    showEvent: function () {
      let start = (this.currentpage - 1) * this.pageSize;
      let end = Math.min(
        this.currentpage * this.pageSize,
        this.eventData.length
      );
      return this.eventData.slice(start, end);
    },
    showTbody: function () {
      let start = (this.currentpage - 1) * this.pageSize;
      let end = Math.min(
        this.currentpage * this.pageSize,
        this.tableData.length
      );
      return this.tableData.slice(start, end);
    },
    formShow() {
      if (this.activityName.indexOf("折") != -1) {
        return 1;
      } else if (
        this.activityName.indexOf("买") != -1 &&
        this.activityName.indexOf("送") != -1
      ) {
        return 2;
      }
    },
  },
};
</script>

<style lang="less" scoped>
#header {
  width: 100%;
  height: 30px;
  color: rgb(51, 51, 51);
  border-bottom: 1px #999 solid;
  margin: 20px;
}
.el-icon-menu {
  font-size: 25px;
  margin-bottom: 10px;
}
span {
  font-size: 15px;
  margin: 10px;
}
#buttons {
  width: 100%;
  height: 70px;
  background: rgb(242, 242, 242);
  margin: 20px;
  border-radius: 10px;
}
#button1,
#button2 {
  height: 35px;
  margin: 15px 30px;
}
#content {
  width: 100%;
  height: 490px;
  background: rgb(242, 242, 242);
  margin: 20px;
  border-radius: 10px;
}
.el-tabs {
  margin: 30px;
}
.el-input {
  width: 300px;
}
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background: rgb(242, 242, 242);
}
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background: rgb(242, 242, 242);
}
#content3 {
  width: 95%;
  height: 420px;
  margin: 0 auto;
}
#header1 {
  width: 100%;
  height: 70px;
  background: rgb(228, 228, 228);
  margin-bottom: 10px;
  border-radius: 10px;
  text-align: center;
}
/deep/#header1 .el-form--inline .el-form-item {
  margin-top: 15px;
}
#content4 {
  width: 100%;
  height: 350px;
  background: rgb(228, 228, 228);
  border-radius: 10px;
}
/deep/#content4 .el-table {
  border-radius: 10px;
  background: rgb(228, 228, 228);
}
/deep/#content4 .el-table__expanded-cell,
/deep/#content4 .el-table th,
/deep/#content4 .el-table tr,
/deep/#content4 .el-table td {
  background: rgb(228, 228, 228);
}
/deep/#content4 .el-pagination.is-background .btn-next,
/deep/#content4 .el-pagination.is-background .btn-prev,
/deep/#content4 .el-pagination.is-background .el-pager li {
  background: rgb(228, 228, 228);
}
</style>